<template>
  <div id="app">
    <vue-table
      :data="data"
      :columns="columns"
      :pagination="ipagination"
      :limitHeightNum="400"
    ></vue-table>
  </div>
</template>

<script>
  import VueTable from './components/VueTable';
  
  export default {
    name: 'App',
    components: {
      VueTable,
    },
    data() {
      return {
        ipagination: {
          current: 1,
          pageSize: 100,
          pageSizeOptions: ['100', '200', '500'],
          showQuickJumper: true,
          showSizeChanger: true,
          total: 100
        },
        columns: [
          {
            title:'公司名称',
            align:"center",
            sorter: true,
            width: 80,
            type: 'dict',
            dataIndex: 'companyId_dictText'
          },
          {
            title:'列2',
            align:"center",
            sorter: true,
            type: 'date',
            dataIndex: 'accountingDate',
            width: 100
          },
          {
            title:'列3',
            align:"center",
            sorter: true,
            type: 'text',
            width: 80,
            dataIndex: 'journalType'
          },
          {
            title:'列4',
            align:"center",
            sorter: true,
            dataIndex: 'journalNo',
            width: 120,
            scopedSlots: { customRender: 'journalNo' }
          },
          {
            title:'列5',
            align:"center",
            sorter: true,
            width: 120,
            dataIndex: 'businessEventFormName'
          },
          {
            title:'列6',
            align:"center",
            sorter: true,
            width: 120,
            dataIndex: 'eventTypeId_dictText'
          },
          {
            title:'列7',
            align:"center",
            sorter: true,
            width: 120,
            dataIndex: 'eventSubTypeId_dictText'
          },
          {
            title:'列8',
            align:"center",
            sorter: true,
            width: 80,
            dataIndex: 'journalEntryDescription'
          },
          {
            title:'列9',
            align:"center",
            sorter: true,
            width: 80,
            dataIndex: 'sku'
          },
          {
            title:'列10',
            align:"center",
            sorter: true,
            width: 100,
            dataIndex: 'postingCodeType'
          },
        ],
        data: [
          {
            companyId_dictText: '小明',
            accountingDate: '小明1111',
            journalType: '北京'
          },
          {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
          {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
          {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
          {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
          {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
           {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          }, {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          }, {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          }, {
            companyId_dictText: '小明',
            accountingDate: '小明1',
            journalType: '北京'
          },
        ]
      }
    }
  }
</script>

<style>
#app {
  padding: 2rem;
  /* background: #f4f4f4; */
}
</style>
